<template>
  <div class="register">
    <div class="register_form">
      <div class="logo">
        <a href="javascript:;"></a>
      </div>
      <div class="title">
        <h4>注册小米帐号</h4>
      </div>
      <div class="mian">
        <div class="register_input">
          <el-input placeholder="邮箱" v-model="email"></el-input>
          <el-input placeholder="用户名" v-model="username"></el-input>
          <div @keyup.enter="register">
            <el-input
              placeholder="密码"
              type="password"
              v-model="password"
            ></el-input>
          </div>
        </div>
        <div class="register_button">
          <el-button @click="register">立即注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data () {
    return {
      email: '',
      username: '',
      password: ''
    }
  },
  methods: {
    register () {
      const { username, email, password } = this
      this.$axios.post('/user/register', {
        username,
        password,
        email
      }).then(res => {
        if (res) {
          this.$msg.success('注册成功')
          this.$router.push('/login')
        }
      }).catch(err => console.log(err))
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
.register {
  @include position(fixed);
  background-color: #f9f9f9;
  .register_form {
    width: 854px;
    height: 500px;
    background-color: $colorG;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .logo {
      margin-bottom: 40px;
      a {
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
        cursor: default;
        background-image: url(https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png);
      }
    }
    .title {
      text-align: center;
      h4 {
        font-size: 30px;
        font-weight: normal;
      }
    }
    .mian {
      width: 332px;
      padding: 30px 0;
      margin: 0 auto;
      .register_button {
          margin-top: 18px;
        .el-button {
          width: 330px;
          padding: 12px 0;
          background-color: $colorA;
          color: $colorG;
        }
      }
      .register_input {
          .el-input {
              margin-bottom: 14px;
          }
      }
    }
  }
}
</style>
